<div id="tz-checkout"></div>
<div id="tz-checkout-button" style="margin-top: 15px;"></div>

<script language="javascript">
  $(function () {
    $.createPaymentCard({
      src: "https://js-sandbox.tazapay.com/v2.0-sandbox.js",
      button: "#tz-checkout-button",
      form: "#tz-checkout",
      async scriptSuccess({ disableButton, enabledButton }) {
        disableButton();
        const options = {
          clientToken: "r7E7tTYZMilkqTi3bTF45Se3W661ew7HXJ-Ix7Hd-kE=", // Use the token obtained at step2.
          callbacks: {
            onPaymentSuccess: () => {
              window.location.href = "{$successUrl}"
            },
            onPaymentClicked: () => {
              alert("payment faild");
            },
            onValidate: (results) => { console.log("validation results", results) },
            onPaymentMethodSelected: () => { console.log("onPaymentMethodSelected") }, // optional
            onPaymentCancel: () => { console.log("onPaymentCancel") }, // optional
          },
          style: {
            "container_padding": "0",
            "modal_padding": 0
          }, // optional, for customising your integration,
          config: {
            redirectionTarget: "self" // optional -> "self" or "new_window"
          },
        };

        window.tazapay.checkout(options);
      },
      async verified() {
        window.tazapay.validate()
        return false
      },
      submit({ showLoading, hideLoading }) {

      }
    })

  })


</script>